<template>
  <div class="statistics-container">
    <el-card class="statistics-card" shadow="hover">
      <div class="card-header">
        <i class="el-icon-data-analysis"></i>
        <span>订单统计</span>
      </div>
      
      <div class="statistics-content">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="stat-item total">
              <div class="stat-icon">
                <i class="el-icon-s-order"></i>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.total }}</div>
                <div class="stat-label">总订单数</div>
              </div>
            </div>
          </el-col>
          
          <el-col :span="6">
            <div class="stat-item paid">
              <div class="stat-icon">
                <i class="el-icon-money"></i>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.paid }}</div>
                <div class="stat-label">已支付</div>
              </div>
            </div>
          </el-col>
          
          <el-col :span="6">
            <div class="stat-item unpaid">
              <div class="stat-icon">
                <i class="el-icon-warning"></i>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.unpaid }}</div>
                <div class="stat-label">未支付</div>
              </div>
            </div>
          </el-col>
          
          <el-col :span="6">
            <div class="stat-item today">
              <div class="stat-icon">
                <i class="el-icon-date"></i>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.today }}</div>
                <div class="stat-label">今日订单</div>
              </div>
            </div>
          </el-col>
        </el-row>
        
        <el-divider content-position="center">订单金额统计</el-divider>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="stat-item amount">
              <div class="stat-icon">
                <i class="el-icon-wallet"></i>
              </div>
              <div class="stat-info">
                <div class="stat-value">${{ Number(statistics.totalAmount).toFixed(2) }}</div>
                <div class="stat-label">总金额</div>
              </div>
            </div>
          </el-col>
          
          <el-col :span="8">
            <div class="stat-item monthly">
              <div class="stat-icon">
                <i class="el-icon-shopping-cart-full"></i>
              </div>
              <div class="stat-info">
                <div class="stat-value">${{ Number(statistics.monthlyAmount).toFixed(2) }}</div>
                <div class="stat-label">本月金额</div>
              </div>
            </div>
          </el-col>
          
          <el-col :span="8">
            <div class="stat-item daily">
              <div class="stat-icon">
                <i class="el-icon-goods"></i>
              </div>
              <div class="stat-info">
                <div class="stat-value">${{ Number(statistics.dailyAmount).toFixed(2) }}</div>
                <div class="stat-label">今日金额</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'OrderStatistics',
  props: {
    statistics: {
      type: Object,
      default: () => ({
        total: 0,
        paid: 0,
        unpaid: 0,
        today: 0,
        totalAmount: 0,
        monthlyAmount: 0,
        dailyAmount: 0
      })
    }
  }
}
</script>

<style scoped>
.statistics-container {
  margin-bottom: 20px;
}

.statistics-card {
  background-color: #f8f9fa;
  border-radius: 8px;
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #409EFF;
}

.card-header i {
  margin-right: 8px;
}

.statistics-content {
  padding: 10px 0;
}

.stat-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.stat-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.stat-icon i {
  font-size: 24px;
  color: white;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

/* u7edfu8ba1u9879u989cu8272u6837u5f0f */
.total {
  background-color: #ecf5ff;
}

.total .stat-icon {
  background-color: #409EFF;
}

.total .stat-value {
  color: #409EFF;
}

.paid {
  background-color: #f0f9eb;
}

.paid .stat-icon {
  background-color: #67C23A;
}

.paid .stat-value {
  color: #67C23A;
}

.unpaid {
  background-color: #fef0f0;
}

.unpaid .stat-icon {
  background-color: #F56C6C;
}

.unpaid .stat-value {
  color: #F56C6C;
}

.today {
  background-color: #fdf6ec;
}

.today .stat-icon {
  background-color: #E6A23C;
}

.today .stat-value {
  color: #E6A23C;
}

.amount, .monthly, .daily {
  background-color: #f4f4f5;
}

.amount .stat-icon {
  background-color: #909399;
}

.amount .stat-value {
  color: #909399;
}

.monthly .stat-icon {
  background-color: #9254de;
}

.monthly .stat-value {
  color: #9254de;
}

.daily .stat-icon {
  background-color: #36cfc9;
}

.daily .stat-value {
  color: #36cfc9;
}

.el-divider {
  margin: 24px 0;
}
</style>
